---

---

<!-- Header Section with enhanced design -->
<header class="pt-20 relative overflow-hidden">
  <!-- Subtle background pattern -->
  <div class="absolute inset-0 opacity-5">
    <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.15) 1px, transparent 0); background-size: 20px 20px;"></div>
  </div>
  
  <div class="relative">
    <div class="mb-8">
      <div class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-4 uppercase tracking-wider">
        Documentation
      </div>
    </div>

    <div class="max-w-4xl">
      <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-black dark:text-white mb-6 tracking-tight">
        Build LLM-powered agents<br />
        <span class="bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 bg-clip-text text-transparent animate-gradient bg-300% bg-left">
          with production-ready TypeScript
        </span>
      </h1>
      
      <p class="text-xl leading-relaxed text-gray-600 dark:text-gray-300 max-w-2xl mb-8">
        <span class="font-semibold text-gray-800 dark:text-gray-200">DSPy for TypeScript.</span> Working with LLMs is complex—they don't always
        do what you want. DSPy makes it easier to build amazing things with LLMs. Just
        define your inputs and outputs (signature) and an efficient prompt is auto-generated
        and used. Connect together various signatures to build complex systems and
        workflows using LLMs.
      </p>

      <!-- Key Features -->
      <div class="flex flex-wrap items-center gap-x-8 gap-y-4 mb-10">
        <div class="flex items-center space-x-2">
          <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">15+ LLM Providers</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">End-to-end Streaming</span>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-2 h-2 bg-cyan-500 rounded-full"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Auto Prompt Tuning</span>
        </div>
      </div>

      <!-- Badges Section -->
      <div class="flex flex-wrap items-center gap-3 mb-8">
        <a
          href="https://github.com/ax-llm/ax"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:scale-105 transition-transform"
        >
          <img
            src="https://img.shields.io/github/stars/ax-llm/ax?style=for-the-badge&logo=github&logoColor=white&color=black&labelColor=555"
            alt="GitHub Stars"
            class="h-8 rounded-lg shadow-sm"
          />
        </a>
        <a
          href="https://www.npmjs.com/package/@ax-llm/ax"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:scale-105 transition-transform"
        >
          <img
            src="https://img.shields.io/npm/v/@ax-llm/ax?style=for-the-badge&logo=npm&logoColor=white&color=CC3534&labelColor=555"
            alt="NPM Package"
            class="h-8 rounded-lg shadow-sm"
          />
        </a>
        <a
          href="https://twitter.com/dosco"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:scale-105 transition-transform"
        >
          <img
            src="https://img.shields.io/twitter/follow/dosco?style=for-the-badge&logo=twitter&logoColor=white&color=1DA1F2&labelColor=555"
            alt="Twitter Follow"
            class="h-8 rounded-lg shadow-sm"
          />
        </a>
      </div>
    </div>
  </div>
</header>

<style>
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 4s ease-in-out infinite;
  }
</style>